<template>
    <div class="login-main" v-loading="changeRegLoading || submitLoading">
      <login-title />  
      <div class="flex-row">
         <img src="~@/assets/login/icon-back.svg" class="back-btn" @click="showLoginPage('login')" />
      </div>
        
      <form class="form" @submit.prevent="submit"> 
      
        <div class="flex-column title">
            <h2>账号密码登录</h2>            
        </div>
        <p> </p>
        <!-- 账户输入 -->
        <div class="flex-row">
            <label>手机账户</label>
        </div>
        <div class="inputForm">
          <img src="~@/assets/login/icon_mobile.svg" alt="email" />
          <input type="text" class="input" v-model="loginObj.username" placeholder="您的账户" />
        </div>
  
        <!-- 密码输入 -->
        <div class="flex-row">
          <label>登录密码</label>
        </div>
        <div class="inputForm">
          <img src="~@/assets/login/pass.svg" alt="password" />
          <input
            :type="showPassword ? 'text' : 'password'"
            class="input"
            v-model="loginObj.password"
            placeholder="您的密码"
          />
          <img
            src="~@/assets/login/eye.svg"
            alt="toggle password visibility"
            class="eye-icon"
            @click="togglePasswordVisibility"
          />
        </div>
  
        <!-- 确认密码输入 -->
        <div v-if="regState" class="flex-column">
          <label>确认密码</label>
        </div>
        <div v-if="regState" class="inputForm">
          <img src="~@/assets/login/pass.svg" alt="password" />
          <input
            :type="showConfirmPassword ? 'text' : 'password'"
            class="input"
            v-model="loginObj.affirmPassword"
            placeholder="确认密码"
          />
          <img
            src="~@/assets/login/eye.svg"
            alt="toggle confirm password visibility"
            class="eye-icon"
            @click="toggleConfirmPasswordVisibility"
          />
        </div>
  
        <!-- 忘记密码 -->
        <div v-if="!regState" class="flex-row">
          <span class="span">忘记密码?</span>
        </div>
  
        <!-- 提交按钮 -->
        <button type="submit" class="button-submit">{{ regState ? '注 册' : '登 录' }}</button>
  
        <!-- 注册切换 -->
        <p class="p" v-if="!regState">
          没有账户?
          <span class="span" @click="toggleRegisterState">注 册</span>
        </p>
        <p class="p" v-else>
          点击返回
          <span class="span" @click="toggleRegisterState">登 录</span>
        </p>
        
  
  
    </form>
      </div> 
  </template>
  
  <script>
  import LoginTitle from '@/components/bar/LoginTitle.vue';
  
  export default {
    components: {
      LoginTitle
    },
    data() {
      return {
        regState: false,
        showPassword: false,
        showConfirmPassword: false,
        changeRegLoading: false,
        submitLoading: false,
        loginObj: {
          username: '',
          password: '',
          affirmPassword: ''
        }
      }
    },
    created() {
      this.$emit('updateBar')
    },
    methods: {
      // 切换注册状态
      toggleRegisterState() {
        this.changeRegLoading = true
        //window.ipcRenderer.send('loginOrRegister',!this.regState)
        setTimeout(() => {
          this.regState = !this.regState
          if (!this.regState) {
            this.loginObj.username = ''
            this.loginObj.password = ''
            this.loginObj.affirmPassword = ''
          }
          this.changeRegLoading = false
        }, 1000)
      },
      // 显隐密码
      togglePasswordVisibility() {
        this.showPassword = !this.showPassword
      },
      toggleConfirmPasswordVisibility() {
        this.showConfirmPassword = !this.showConfirmPassword
      },
      // 提交表单
      submit() {
        // 校验逻辑
        if (!this.loginObj.username || !this.loginObj.password) {
          this.$message({
            message: '请输入完整的账户信息！',
            type: 'info'
          })
          return
        }
        if (this.regState && this.loginObj.password !== this.loginObj.affirmPassword) {
          this.$message({
            message: '两次输入的密码不一致！',
            type: 'error'
          })
          return
        }
        this.submitLoading = true
        console.log('3424234234');
      },

      showLoginPage(type) {
        if ('email' === type) {
            console.log("email login page");
            this.$router.push('/login/email')
        }else if ('mobile' === type) {
            console.log("mobile login page");
            this.$router.push('/login/mobile')
        } else if ('key' === type) {
            console.log("key login page");
            this.$router.push('/login/key')
        } else {
            console.log("hello page");
            this.$router.push('/login')
        }
      }
    }
  }
  </script>
  
  <style>
  @import './index.css';
  
  </style>
  